<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>教育平台</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <!-- 导航栏 -->
    <nav class="navbar">
      <div class="logo">
        <img src="logo.png" alt="Logo" />
      </div>
      <ul class="nav-links">
        <li><a href="#" class="active">首页</a></li>
        <li><a href="#">课程</a></li>
        <li><a href="#">师资</a></li>
        <li><a href="#">咨询</a></li>
        <li><a href="#">关于我们</a></li>
      </ul>
      <div class="user-actions">
        <a href="#" class="login-btn">登录</a>
        <a href="#" class="register-btn">注册</a>
      </div>
    </nav>

    <!-- 主要内容区域 -->
    <main>
      <!-- 轮播图 -->
      <section class="slider">
        <div class="slide active">
          <h2>欢迎来到我们的教育平台</h2>
          <p>探索丰富的学习资源和优质的教育服务</p>
          <a href="#" class="cta-btn">了解更多</a>
        </div>
        <div class="slide">
          <h2>专业课程</h2>
          <p>由行业专家授课的高质量课程</p>
          <a href="#" class="cta-btn">查看课程</a>
        </div>
        <div class="slide">
          <h2>灵活学习</h2>
          <p>随时随地学习，适应你的生活节奏</p>
          <a href="#" class="cta-btn">开始学习</a>
        </div>
      </section>

      <!-- 课程分类 -->
      <section class="categories">
        <h2>课程分类</h2>
        <div class="category-cards">
          <div class="category-card">
            <img src="category1.png" alt="基础教育" />
            <h3>基础教育</h3>
          </div>
          <div class="category-card">
            <img src="category2.png" alt="职业技能" />
            <h3>职业技能</h3>
          </div>
          <div class="category-card">
            <img src="category3.png" alt="高等教育" />
            <h3>高等教育</h3>
          </div>
          <div class="category-card">
            <img src="category4.png" alt="兴趣爱好" />
            <h3>兴趣爱好</h3>
          </div>
        </div>
      </section>

      <!-- 推荐课程 -->
      <section class="featured-courses">
        <h2>推荐课程</h2>
        <div class="course-cards">
          <div class="course-card">
            <img src="course1.png" alt="课程1" />
            <h3>Web前端开发</h3>
            <p>学习HTML、CSS和JavaScript</p>
            <a href="#" class="course-btn">查看详情</a>
          </div>
          <div class="course-card">
            <img src="course2.png" alt="课程2" />
            <h3>Java编程</h3>
            <p>从入门到精通的Java课程</p>
            <a href="#" class="course-btn">查看详情</a>
          </div>
          <div class="course-card">
            <img src="course3.png" alt="课程3" />
            <h3>数据分析</h3>
            <p>使用Python进行数据分析</p>
            <a href="#" class="course-btn">查看详情</a>
          </div>
        </div>
      </section>
    </main>

    <!-- 页脚 -->
    <footer>
      <div class="footer-content">
        <div class="footer-section">
          <h3>关于我们</h3>
          <p>我们致力于提供高质量的教育服务</p>
        </div>
        <div class="footer-section">
          <h3>快速链接</h3>
          <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">课程</a></li>
            <li><a href="#">师资</a></li>
            <li><a href="#">咨询</a></li>
          </ul>
        </div>
        <div class="footer-section">
          <h3>联系我们</h3>
          <p>邮箱：contact@example.com</p>
          <p>电话：400-123-4567</p>
        </div>
      </div>
      <div class="copyright">
        <p>© 2024 教育平台. 保留所有权利.</p>
      </div>
    </footer>

    <script src="script.js"></script>
  </body>
</html>
